<!--  -->
<template>
    <div>
        <button @click="comName = 'right'"> right</button>
        <button @click="comName = 'left'"> left</button>
        <!-- 组件的占位符 -->
        <!-- |<component is="right"></component> -->
        <keep-alive>
            <component :is="comName"></component>
        </keep-alive>

    </div>
</template>

<script>

import left from '@/components/base4/3left.vue'
import right from '@/components/base4/3right.vue'
export default {
    components: {
        left, right
    },
    data() {
        return {
            comName: 'right'

        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        console.log("组件创建")
    },
    destroyed() {
        console.log("组件销毁")
    },
    activated() {
        console.log("组件激活")
    },
    deactivated() {
        console.log("组件缓存")
    },

    methods: {

    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>